<template>
    <div class="one">
        <el-form :model="form" inline>
            <el-form-item label="用户名称">
                <el-input v-model="form.name" placeholder="请输入要搜索的用户名" />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="select">搜索</el-button>
            </el-form-item>
        </el-form>
        <el-button type="primary" @click="showAddAccount">新增</el-button>
    </div>
    <div class="two">
        <el-table :data="tableData" style="width: 100%">
            <el-table-column label="用户名" width="180" prop="account">
                <!-- <template #default="scope">
                    <div style="display: flex; align-items: center">
                        <el-icon>
                            <timer />
                        </el-icon>
                        <span style="margin-left: 10px">{{ scope.row.date }}</span>
                    </div>
                </template> -->
            </el-table-column>
            <el-table-column label="密码" width="180" prop="level">
                <!-- <template #default="scope">
                    <el-popover effect="light" trigger="hover" placement="top" width="auto">
                        <template #default>
                            <div>name: {{ scope.row.name }}</div>
                            <div>address: {{ scope.row.address }}</div>
                        </template>
                        <template #reference>
                            <el-tag>{{ scope.row.name }}</el-tag>
                        </template>
                    </el-popover>
                </template> -->
            </el-table-column>
            <el-table-column label="操作">
                <template #default="scope">
                    <el-button size="small" @click="updateAccount(row)">修改</el-button>
                    <el-button size="small" type="danger" @click="deleteAccount(row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>

    <div class="tanchuang">
        <el-dialog v-model="dialogFormVisible" :title="dialogTitle" @close="resetAccountDialog">
            <el-form :model="accountForm">
                <el-form-item label="用户名称" :label-width="formLabelWidth">
                    <el-input v-model="accountForm.account" placeholder="请输入用户名称" />
                </el-form-item>
                <el-form-item label="用户等级" :label-width="formLabelWidth">
                    <el-input v-model="accountForm.level" placeholder="请输入用户等级" />
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="resetAccountDialog">取消</el-button>
                    <el-button type="primary" @click="addAccount" v-if="dialogType === dialogTypeMap.add">确认</el-button>
                    <el-button type="primary" @click="updateAccountHandle" v-else>
                        确认
                    </el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<script setup>
import { ref, computed, getCurrentInstance } from 'vue'
import { getDataApi, addAccountApi, deleteAccountApi, updateAccountApi } from '../utils/mockServer/db'

const DEFAULTLEVEL = 1
const DIALOGTITLEMAP = {
    0: '新增',
    1: '修改'
}
const {proxy:_this} = getCurrentInstance()

//列表数据
const tableData = ref([])

//搜索框
const form = ref({
    name: ''
})

//新增/修改时的表单
const accountForm =ref({
    account:'',
    level:DEFAULTLEVEL,
    id:0
})
//新增/修改弹窗
const dialogFormVisible =ref(false)
//弹窗类型Map
const dialogTypeMap =ref({
    add:0,
    modify:1
})
// 弹窗类型map
const dialogType = ref(dialogTypeMap.value.add)
//弹窗标语
const dialogTitle = computed(()=>{
    return DIALOGTITLEMAP[dialogType]
})
//请求全部数据
const getData = (account) => {
    tableData.value = getDataApi({ account })
}
getData()

//搜索
const select = () => {
    getData(form.value.name)
}

//点击新增显示弹框
const showAddAccount =()=>{
    dialogFormVisible.value = true
    dialogType.value = dialogTypeMap.value.add
}

const addAccount =()=>{
//获取弹框的数据
const {account,level} = accountForm.value
const accountObj = {
    account,
    level
}
//调用接口
addAccountApi(accountObj)
    _this.$message({
        type:'success',
        message:'添加成功'
    })

    getData()
    resetAccountDialog()
}

//  const updateAccount =(row)=>{
//     //展示弹框并切换弹框内容
//     dialogFormVisible.value = true
//     dialogType.value=dialogTypeMap.value.modify

//     //将要修改的内容显示到输入框中
//     const {account,level,id} = row
//     accountForm.value.account = account
//     accountForm.value.level = level
//     accountForm.value.id = id
//  }

//  const updateAccountHandle =()=>{
//     updateAccountApi(accountForm.value)
//     _this.$message({
//         type:'success',
//         message:'修改成功'
//     })
//     getData()
//     resetAccountDialog()
//  }
  
const updateAccount = (row) => {
    //展示弹框并切换弹框内容
    dialogVisible.value = true
    dialogType.value = dialogTypeMap.value.modify

    //将要修改的内容显示到输入框中
    const { account, level, id } = row
    accountForm.value.account = account
    accountForm.value.level = level
    accountForm.value.id = id
};

const updateAccountHandle = () => {
    updateAccountApi(accountForm.value);
    _this.$message({
    type: 'success',
    message: '更新成功'
});

  getData();
  resetAccountDialog();
};

const deleteAccount = (row) => {
  _this.$confirm('是否要删除该条记录', '警告',
  {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  }
)
    .then(() => {
        deleteAccountApi(row);
        _this.$message({
            type: 'success',
            message: '删除成功' 
        });
        getData()
      }, () => {
        _this.$message({
            type: 'info',
            message: '取消删除' 
        });
      });
};


//复位弹框
const resetAccountDialog=()=>{
    dialogFormVisible.value = false
    accountForm.value.account=''
    accountForm.value.level=  DEFAULTLEVEL
}





</script>